<script setup lang="ts">
  import { ref, onBeforeMount } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  const route = useRoute();
  const router = useRouter();
  const navs = ref([
    { type: 'nav', title: '全域养老总览', name: 'Overview' },
    { type: 'nav', title: '长者动态', name: 'Elder' },
    { type: 'title', title: 'XXXXXX', name: '' },
    { type: 'nav', title: '智能设备', name: 'Device' },
    { type: 'nav', title: '居家养老服务', name: 'Homecare' },
  ]);
  const navActive = ref('overview');

  const handleNavClick = (name: string) => {
    if (name === navActive.value) {
      return;
    }
    navActive.value = name;
    router.push({ name });
  };

  onBeforeMount(() => {
    navActive.value = route.name as string;
  });
</script>

<template>
  <div class="vls flex flex-col">
    <div class="vls-head flex">
      <div class="vls-head-datetime flex"> 2023-12-15 周三 </div>
      <div class="vls-head-navs flex">
        <div
          v-for="(item, index) of navs"
          :key="'nav-' + index"
          class="vls-nav"
          :class="{
            'vls-nav-item': item.type === 'nav',
            'vls-title': item.type === 'title',
            'vls-nav-item-active': item.name == navActive,
          }"
          @click="handleNavClick(item.name)"
        >
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="vls-head-btn flex"></div>
    </div>
    <div class="vls-section">
      <router-view />
    </div>
  </div>
</template>

<style lang="less">
  .vls {
    user-select: none;
    padding-top: 2vh;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #000232;
    font-size: 16px;
    color: #fff;
  }

  .vls-head {
    padding: 0 10px;

    .vls-head-datetime,
    .vls-head-btn {
      align-items: center;
    }

    .vls-head-navs {
      width: 70vw;
      margin: 0 auto;
      justify-content: space-between;

      .vls-nav {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 17px;
        box-sizing: border-box;
        justify-content: space-around;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
      }

      .vls-nav-item {
        // padding: 5px 20px 20px 20px;
        padding-top: 5px;
        margin-top: 10px;
        cursor: pointer;
        padding-bottom: 20px;
        width: 160px;
        // height: 50px;
        background-image: url('@/assets/images/common/nav_bg.png');
      }

      .vls-nav-item-active {
        color: #00f5ff;
        position: relative;

        &::after {
          position: absolute;
          bottom: -15px;
          width: 140%;
          height: 40px;
          content: '';
          display: inline-block;
          background-image: url('@/assets/images/common/nav_active.png');
          background-size: 100% 100%;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }

      .vls-title {
        padding: 0 5vw;
        // box-sizing: border-box;
        font-size: 2em;
        background-image: url('@/assets/images/common/title_box.png');
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
  }

  .vls-section {
    flex: 1;
    padding: 0 20px;
    margin: 2vh 0 1vh 0;

    & > div {
      height: 100%;
    }
  }
</style>
